<template>
  <el-date-picker
    v-model="dateVale"
    type="daterange"
    :picker-options="pickerOptions"
    range-separator="至"
    start-placeholder="开始日期"
    format="yyyy-MM-dd"
    value-format="yyyyMMdd"
    end-placeholder="结束日期"
    align="right">
  </el-date-picker>
</template>
<script type="text/babel">
  export default {
    name: 'HDateRangePicker',
    data() {
      return {
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }]
        }
      }
    },
    computed: {
      dateVale: {
        get: function () {
          return this.value
        },
        set: function (newValue) {
          this.$emit('input', newValue)
        }
      }
    },
    props: {
      value: {
        type: Array,
        default: function () {
          return []
        }
      }
    }
  }
</script>
